<template>
	<view>
		<type-tabs v-model="tabIndex" :fixed="true" :tabs="tabs" @change="tabChange"></type-tabs>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
		<view style="margin-top: 100rpx;">
			<view class="p-section" v-for="(item, index) in lists" :key="index">
				<view class="f-section">
					<view class="basis-df">
						<text>提现时间</text>
						<text class="info">{{ item.nick| userNick  }}</text>
					</view>
					<view class="basis-df">
						<text>提现金额</text>
						<text class="info">{{ item.createTime | formatShortDate }}</text>
					</view>
				</view>
				<view class="s-section">
					<text>提现账号</text>
					<text class="info">{{ item.wechat }}</text>
				</view>
				<view class="s-section">
					<text>提现状态</text>
					<text class="info">{{ item.wechat }}</text>
				</view>
			</view>
		</view>
		</mescroll-body>
	</view>
</template>

<script>
	import typeTabs from '@/components/type-tabs.vue';
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	var _self; //this容器
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			typeTabs,
		},
		data() {
			return {
				upOption: {
					empty: {
						use: true, // 是否显示空布局
						icon: '/static/icon/empty.png',
						tip: ''
					}
				},
				tabs: [
					{ name: '人民币', type: 'CNY', lists: null, num: 1, y: 0, curPageLen: 0, hasNext: true },
					{ name: 'BTC', type: 'BTC', lists: null, num: 1, y: 0, curPageLen: 0, hasNext: true },
					{ name: 'ETH', type: 'ETH', lists: null, num: 1, y: 0, curPageLen: 0, hasNext: true }
				],
				tabIndex: 0, // 当前菜单下标
				preIndex: 0, // 前一个菜单下标
				totalPage: 0 //总页数
			};
		},
		onLoad(options) {
			_self = this;
		},
		computed: {
			// 列表数据
			lists() {
				return this.tabs[this.tabIndex].lists;
			}
		},
		methods: {
	
			/*下拉刷新的回调 */
			downCallback() {
				_self.mescroll.resetUpScroll();
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				if (_self.isChangeTab) {
					_self.mescroll.showUpScroll();
				}
				_self
					.getListDataFromNet(page.num, page.size)
					.then(curPageData => {
						let curTab = _self.tabs[_self.tabIndex];
						if (page.num == 1) curTab.members = []; //如果是第一页需手动制空列表
						curTab.members = curTab.members.concat(curPageData); //追加新数据
						_self.mescroll.endByPage(curPageData.length, _self.totalPage);
						_self.$nextTick(() => {
							curTab.num = page.num; // 页码
							curTab.curPageLen = curPageData.length; // 当前页长
							curTab.hasNext = _self.mescroll.optUp.hasNext; // 是否还有下一页
							if (_self.isChangeTab) {
								_self.isChangeTab = false;
								_self.mescroll.hideUpScroll();
							}
						});
					})
					.catch(() => {
						//联网失败, 结束加载
						_self.mescroll.endErr();
					});
			},
	
			/* 获取查询数据 */
			getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) {
				try {
					const param = {
						currentPage: pageNum,
						pageSize: pageSize,
						condition: {
							currency: _self.tabs[_self.tabIndex].type
						}
					};
					let promise = new Promise(function(resolve, reject) {
						_self.$http.httpRequest('userWithdrawal/list', param, true).then(res => {
							if (res._tranStatus) {
								_self.totalPage = res._data.totalPage;
								resolve(res._data.pageItems);
							}
							else{
							resolve([])
							}
						});
					});
					return promise;
				} catch (e) {
					return Promise.reject(e);
				}
			},

			// 切换菜单
			tabChange(index) {
				// 记录前一个菜单的数据
				let preTab = _self.tabs[_self.preIndex];
				preTab.y = _self.mescroll.getScrollTop(); // 滚动条位置
				_self.preIndex = index;
				// 当前菜单的数据
				let curTab = _self.tabs[index];
				if (!curTab.members) {
					// 没有初始化,则初始化
					_self.isChangeTab = true;
					_self.mescroll.resetUpScroll();
				} else {
					// 初始化过,则恢复之前的列表数据
					_self.mescroll.setPageNum(curTab.num + 1); // 恢复当前页码
					_self.mescroll.endSuccess(curTab.curPageLen, curTab.hasNext); // 恢复是否有下一页或显示空布局
					_self.$nextTick(() => {
						_self.mescroll.scrollTo(curTab.y, 0); // 恢复滚动条的位置
					});
				}
			}
		}
	};
</script>

<style lang="scss">
.p-section {
	margin: 10rpx;
	background-color: white;
	color: #000000;
	border-radius: 10rpx;
	padding: 20rpx;
	.f-section {
		display: flex;
		flex-wrap: wrap;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	.s-section {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}
	.info {
		color: #aaaaaa;
		font-size: 24rpx;
		padding-left: 20rpx;
	}
}
</style>

